<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无牌车入场</title>
    <style>
        body {
            margin: 0;
            background-color: #eee;
            box-sizing: border-box;
        }

        .chunk {
            border: solid 1px #eee;
           
            display: flex;
            padding: 15px 10px;

        }

        .chunk-left {
            width: 40%;
			line-height:40px;
        }

        .chunk-right {
            width: 60%;
            display: flex;
            justify-content: space-between;
            color: rgb(174, 175, 175);
        }

        .confirmBtn {
            width: 98%;
            height: 50px;
            line-height: 50px;
            background-color: #22ac38;
            text-align: center;
            margin: 30px auto;
            color: white;
			border-radius:5px;
			border:0px solid #ccc
        }



        .shade {
            background-color: rgba(78, 77, 77, 0.2);
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
        }

        .shade-white {
            width: 100%;
            height: 60vw;
            background-color: white;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .shade-header {
            display: flex;
            /* width: 100%; */
            justify-content: space-between;
            padding: 15px 10px;
        }
        .select{
            width:100%;
            height:100%;
            font-size:16px;
            border:0px solid #000;
			height:40px;
			
        }
        .input{
            font-size:16px;
            border:0px solid #000;
            height:28px
        }
		
		
		.clearfix:after {
			content: ".";
			display: block;
			font-size: 0;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		.clearfix {
			display: inline-table;
		}
		.clearfix {
			display: block;
		}

		.che_tit {
			text-align: center;
			padding: 20px;
		}

		.ul_pro {
			background-color: #CED3D9;
			text-align: center;
			padding: 4px 2px;
			font-size: 14px;
		}

		.ul_pro li {
			float: left;
			width: 11.11%;
			padding: 2px;
			box-sizing: border-box;
			list-style:none;
		}

		.ul_pro .li_close {
			float: right;
			width: 22.22%;
		}

		.ul_pro .li_close span {
			background-color: #ACB3BB;
		}

		.ul_pro .li_clean {
			float: right;
			width: 22.22%;
		}

		.ul_pro li span {
			display: block;
			background-color: #fff;
			border-radius: 4px;
			box-shadow: 2px 2px 2px #888888;
			/* max-width:48px; margin:0 auto; */
			line-height: 32px;
			padding-top: 2px;
		}

		.ul_pro li span:active {
			background-color: #4DA9F2;
			color: #fff;
			list-style:none;
		}

		.ul_input {
			padding-top: 20px;
			padding-bottom: 20px;
			padding-left: 0px;
			width: 400px;
			margin: 0 auto;
		}

		.ul_input li {
			float: left;
			width: 12.5%;
			/* padding: 2px; */
			text-align: center;
			list-style:none;
		}

		.ul_input li span {
			display: flex;
			background-color: #fff;
			border: 1px solid #ccc;
			border-radius: 4px;
			width: 40px;
			margin: 0 auto;
			height: 40px;
			line-height: 40px;
			justify-content: center;
			/* text-align: center; */
			/* margin: 0 auto; */
			/* flex-wrap: wrap; */
		}

		.ul_keybord {
			background-color: #CED3D9;
			text-align: center;
			padding: 4px 2px;
			font-size: 14px;
		}

		.ul_keybord li {
			float: left;
			width: 10%;
			padding: 2px;
			box-sizing: border-box;
			list-style:none;
		}

		.ul_keybord .ikey20 {
			margin-left: 5%;
		}

		.ul_keybord .li_w {
			width: 11.11%;
		}

		.ul_keybord .li_close {
			float: right;
			width: 22.22%;
		}

		.ul_keybord .li_close span {
			background-color: #ACB3BB;
		}

		.ul_keybord .li_clean {
			float: right;
			width: 22.22%;
		}

		.ul_keybord li span {
			display: block;
			background-color: #fff;
			border-radius: 4px;
			box-shadow: 2px 2px 2px #888888;
			/* max-width:48px; margin:0 auto; */
			line-height: 32px;
			padding-top: 2px;
		}

		.ul_keybord li span:active {
			background-color: #4DA9F2;
			color: #fff;
		}

		#park-timekeeping{
			margin: 0 auto;
			width: 60%;
			height: 40px;
			border-radius: 3px;
			background-color: #4DA9F2;
			color: white;
			
		}
		.new-energy span{
			font-size: 13px ;
			line-height: 18px !important;
		}
    </style>
	<link href="static/admin/css/layer.css" type="text/css" rel="styleSheet" id="layermcss">
</head>

<body>
	<div style="height:160px">
		<img src="static/img/wx.jpg" style="width:100%;height:100%"/>
	</div>
	
    
	<div style="margin-top:0px">
		
       
        
        
		<div style="text-align:center;border: solid 1px #eee;background-color: white;padding: 15px 10px;">
            请输入车牌
        </div>
		
        <!--<div class="chunk" >
            <div class="chunk-left">车牌</div>
            <div class="chunk-right" >
            </div>
        </div>-->
		
		<div class="car_input" data-pai="" style="width:100%">
			<ul class="clearfix ul_input" style="width:100%">
				<li class="input_pro"><span></span></li>
				<li class="input_pp input_zim"><span></span></li>
				<li class="input_pp"><span></span></li>
				<li class="input_pp"><span></span></li>
				<li class="input_pp"><span></span></li>
				<li class="input_pp"><span></span></li>
				<li class="input_pp"><span></span></li>
				<li class="input_pp new-energy-input" style="display: none;"><span></span></li>
				<li class="new-energy"><span>新能源</span></li>
			</ul>
		</div>
         <div id="a" style="display:none"></div>
        
         <input type="hidden"  class="input" required="required" name="car_number" id="car_number" >
		<input type="hidden"  name="car_id" value="{$cam_id}">
		
        <div class="chunk">
            <input type="buttom" class="confirmBtn" value="入场"    style="margin:0 auto;" onclick="admission"/>
        </div>
    </div> 
    
{include file="public/carplate"/} 

	
</body>

</html>
<script src="static/admin/js/jquery.js"></script>
<script src="static/admin/js/layer.js" type="text/javascript"></script>
	<script src="static/admin/js/index.js" type="text/javascript"></script>
	<script type="text/javascript">
		var newEnergy = false;
		$(".new-energy").on("click",()=>{
			newEnergy = true;
			$(".new-energy").css("display","none");
			$(".new-energy-input").css("display","inline");
		})
		
		function checkform(){
			var car_number = $("#a").text();
			
			$("#car_number").val(car_number);
			console.log($("#car_number").val());
			if($("#a").text().length >= 7){
			    var url = '{:url("admission")}';
			    var cam_id='{$cam_id}';
				$.post(url, {carPlateNo: car_number,cam_id:cam_id}, function(r){
					if (r.success) {
						
					}else{
						
					}
				})
			}else{
				alert("请输入正确车牌格式");
				return false;
			}
		}
	</script>
